<template>
  <div class="train-content">
    <ContentWrap>
      <back :backOption="backOption" />
      <div class="mt-5 h-full">
        <el-form-item>
          <el-button type="primary" @click="edit('create', {})">添加</el-button>
          <el-button type="primary" @click="fileReference">引用文件</el-button>
        </el-form-item>
        <AsyncTable v-bind="tableOption" :fetchData="fetchData" ref="tableRef" />
      </div>
      <FileReference ref="addDialogRef" :moduleTaskId="moduleTaskId" :refreshTable="refreshTable" />
    </ContentWrap>
  </div>
</template>
<script setup lang="tsx">
import back from '@/components/Back/index.vue'
import * as api from '@/api/system/trainModel/trainContent'
import { dataClassificationTree } from '@/api/dataStandards/classification/index'
import { useRoute } from 'vue-router'
import FileReference from './FileReference.vue'

const { proxy } = getCurrentInstance()
const backOption = reactive({
  title: '训练内容'
})
const addDialogRef = ref()

const route = useRoute()
const moduleTaskId = ref(route.query.moduleTaskId)
const tableRef = ref()
const cascaderProps = {
  multiple: true,
  checkStrictly: false,
  label: 'text',
  value: 'id',
  children: 'children',
  emitPath: false
}
const classificationList = ref([])

const tableOption = reactive({
  columns: [
    {
      width: '100px',
      type: 'index',
      label: '序号'
    },
    {
      width: '200px',
      label: '训练样本数',
      prop: 'samples'
    },
    {
      label: '训练状态',
      width: '230px',
      render: ({ row }) => {
        return (
          <>
            <span>{row.status === 'success' ? '已就绪' : '文件处理中'}</span>
          </>
        )
      }
    },
    {
      label: '标签',
      render: ({ row }) => {
        return (
          <>
            <el-cascader
              show-all-levels={false}
              popper-class="popper-select"
              props={cascaderProps}
              collapse={true}
              collapse-tags
              collapse-tags-tooltip
              v-model={row.classificationIdList}
              options={classificationList.value}
              placement="bottom"
              onVisibleChange={(e) => {
                classLabel(e, row)
              }}
            />
          </>
        )
      }
    },
    {
      width: '150px',
      label: '操作',
      render: ({ row }) => {
        return (
          <>
            <el-button
              type="primary"
              link
              onClick={() => {
                edit('edit', row)
              }}
            >
              追加文件
            </el-button>
            <ns-button
              confirm
              type="danger"
              link
              onClick={() => {
                del(row)
              }}
            >
              删除
            </ns-button>
          </>
        )
      }
    }
  ],
  data: []
})
const del = async (row) => {
  const { code } = await api.delContentModel({ idList: [row.id] })
  code == 200 && ElMessage.success('删除成功')
  code == 200 && tableRef.value.resetPage()
  code == 200 && tableRef.value.fetchData()
}
const refreshTable = () => {
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
const fetchData = async ({ page, pageSize }) => {
  const { data, count } = await api.getContentList({
    page,
    pageSize,
    moduleTaskId: moduleTaskId.value
  })
  return { data, count }
}
const fileReference = () => {
  addDialogRef.value?.open()
}
const getClassificationList = async () => {
  const data = await dataClassificationTree({ type: 0 })
  classificationList.value = traverseTree(data)
}
const classLabel = async (val, row) => {
  if (!val) {
    row.assetCreateList = row.fileParseAssetRespVOList
    delete row.fileParseAssetRespVOList
    const { code } = await api.editContentModel(row)
    code == 200 && ElMessage.success('标签更新成功')
    code == 200 && tableRef.value.fetchData()
  }
}
const traverseTree = (data) => {
  const updatedTree = []
  for (let i = 0; i < data.length; i++) {
    const node = data[i] // 创建新节点并添加 disable 属性
    if (node.pid == '-1' && node.children.length == 0) {
      node.disabled = true
    }
    updatedTree.push(node)
    if (node.children && node.children.length > 0) {
      node.children = traverseTree(node.children) // 递归遍历子节点并更新子树结构
    }
  }
  return updatedTree
}
const edit = (type, row) => {
  proxy.$Drawer({
    title: type === 'create' ? '添加训练内容' : '编辑训练内容',
    component: import('./editContent.vue'),
    size: '50%',
    params: {
      moduleTaskId: moduleTaskId.value,
      id: row.id || '',
      type,
      callBack: () => {
        tableRef.value.resetPage()
        tableRef.value.fetchData()
      }
    }
  })
}
onMounted(() => {
  getClassificationList()
})
</script>

<style lang="scss"></style>
